<template>
	<Page :config='pageConfig'>
		<Modal ref='modalRef1' title='自定义弹窗' :controls='controls'>
			自定义弹窗
		</Modal>
		<Modal ref='modalRef2' title='自定义弹窗' full @ok='onOk'>
			全屏弹窗
		</Modal>
	</Page>
</template>

<script setup>
	const Page			= $.lazy(()=>import('#tp/content/page-content.vue'))
	const Modal 		= $.lazy(()=>import('@antd/modal.vue'))
	/* ---------------------------  提交表单 --------------------------- */
	
	let modalRef1 = $ref()
	let modalRef2 = $ref()
	
	const onOk = close => {
		close()
	}
	
	const controls = {
		// ok: { label: '提交' },
		// cancel: { label:'返回' },
		// after: [{ label:'后置按钮' }],
		// before: [{ label:'前置按钮', disabled:true }]
	}
	
	const pageConfig = {
		title: '自定义弹窗',
		controls	: [
			{ label:'打开弹窗', click:()=>modalRef1.open()},
			{ label:'全屏弹窗', click:()=>modalRef2.open()}
		]
	}
</script>